<template>
    <div class="company">
        <div>
            <SearchBar class="form" @onSearch="handleSearch" @childFn="resetForm">
                <SearchBarItem label="报表统计时间：">
                    <DatePicker type="month" ref="clearDatePicker" transfer :options="options3" v-model="searchData.time" @on-change="searchTime" style="width: 200px" placeholder="请选择年月"></DatePicker>
                </SearchBarItem>
            </SearchBar>

            <Row class="handleBtn" v-show="(costData.length && name1 == '1') || (costDiffData.length  && name1 == '2') || (noReportData.length  && name1 == '3') || (retroaciveData.length  && name1 == '4') ">
                <Authc permissions="trade:settlement:cmb">
                    <Button type="primary" @click="updateCompany" :disabled="isDisabled">更新报表</Button>
                </Authc>
                <Authc permissions="trade:settlement:cmb">
                    <Button type="primary" @click="exportPdf">导出</Button>
                </Authc>
            </Row>

            <Tabs type="card" class="tab" v-model="name1" :animated="false" @on-click="bandleTab">

                <TabPane label="收入成本报表" name='1'>
                    <CostReport :costData="costData" :costDataType="costDataType" @getCostReportTime="updateCompany"></CostReport>
                </TabPane>

                <TabPane label="收入成本差异报表" name='2'>
                    <CostDiffReport :costDiffData="costDiffData" :costDiffDataType="costDiffDataType" @getCostReportTime="updateCompany"></CostDiffReport>
                </TabPane>

                <TabPane label="无合同报表" name='3'>
                    <NoContractReport :noReportData="noReportData" :noReportDataType="noReportDataType" @getCostReportTime="updateCompany"></NoContractReport>
                </TabPane>

                <TabPane label="补签合同报表" name='4'>
                    <RetroactiveContractReport :retroaciveData="retroaciveData" :retroaciveDataType="retroaciveDataType" @getCostReportTime="updateCompany"></RetroactiveContractReport>
                </TabPane>
            </Tabs>
        </div>
        <div class="company_item" v-if="show_item">
            <div class="company_item_box">
                <Alert type="warning">更新中，请稍候...</Alert>
            </div>
        </div>
    </div>
</template>

<script>
import {
    Button,
    DatePicker,
    Row,
    Col,
    Table,
    Input,
    Select,
    Option,
    Tabs,
    TabPane,
    Message,
    Alert
} from "view-design";
import Authc from "@/components/Authc";
import { namespace } from '../Module/companyModule';
import util from '@/utils/util';
import SearchBar from "@/components/SearchBar";
import CostReport from "./CostReport";
import CostDiffReport from "./CostDiffReport";
import NoContractReport from "./NoContractReport";
import RetroactiveContractReport from "./RetroactiveContractReport";

export default {
    name: "",
    components: {
        SearchBar,
        SearchBarItem: SearchBar.SearchBarItem,
        DatePicker,
        Button,
        Row,
        Col,
        Table,
        Authc,
        Input,
        Select,
        Option,
        Tabs,
        TabPane,
        CostReport,
        CostDiffReport,
        NoContractReport,
        RetroactiveContractReport,
        Message,
        Alert
    },
    data() {
        return {
            isDisabled: false,
            show_item: false,
            name1: '1',
            options3: {
                disabledDate (date) {
                    let nowTime = new Date()
                    let month = nowTime.getMonth() + 1
                    let year = nowTime.getFullYear()
                    return date && date.valueOf() > new Date(`${year}-${month}`);
                }
            },
            searchData: {},
            costDataType: false,
            costDiffDataType: false,
            noReportDataType: false,
            retroaciveDataType: false,
            costData: [], /** 收入成本data */
            costDiffData: [], /** 收入成本差异data */
            noReportData: [], /** 无合同data */
            retroaciveData: [], /** 补签合同data */

            costType: '1', /** tabs 下标 */
            typeArr: [
                {
                    key: '1',
                    value: '收入成本报表'
                },
                {
                    key: '2',
                    value: '收入成本差异报表'
                },
                {
                    key: '3',
                    value: '无合同报表'
                },
                {
                    key: '4',
                    value: '补签合同报表'
                }
            ]
        };
    },
    created() {
        this.getDataList();
    },
    methods: {

        /** 导出pdf */
        async exportPdf () {
            try {
                if (!this.searchData.date) {
                    this.$Message.warning({
                        content: '请选择报表时间'
                    })
                    return;
                }
                let params = {
                    costType: this.costType
                }
                let itemName = this.typeArr.find(e => e.key == this.costType).value
                let res = await this.$store.dispatch(`${namespace}/exportPdf`, { ...this.searchData, ...params });

                if (res.status === 200) {
                    util.exportExcle(res, itemName, 'pdf');
                }
            } catch (error) {
                this.$Message.error({
                    content: error
                })
            }
        },

        /** 列表初始化数据  */
        async getDataList () {
            try {
                let params = {
                    date: this.searchData.date ? this.searchData.date : util.getYearMonth(),
                    costType: Number(this.costType)
                }
                this.show_item = true;
                this.costData = [];
                this.costDiffData = [];
                this.noReportData = [];
                this.retroaciveData = [];
                let res = await this.$store.dispatch(`${namespace}/companyData`, params);
                if (res.data.ret === 0) {
                    let data = res.data.data;
                    this.show_item = false;

                    /** costType ==  1成本 2成本差异 3无合同 4补签合同 */
                    if (data === 0) {
                        this.$Message.warning({
                            content: `暂无${this.searchData.date ? this.searchData.date : ''}报表`
                        })
                    }

                    if (this.costType == '1') {
                        if (data === 0) {
                            this.costDataType = true;
                        } else {
                            this.costDataType = false;
                            this.costData = data;
                        }
                        // console.log(this.costDataType, this.costData, '111111111111')
                    } else if (this.costType == '2') {
                        if (data === 0) {
                            this.costDiffDataType = true;
                        } else {
                            this.costDiffDataType = false;
                            this.costDiffData = data;
                        }
                        // console.log(this.costDiffDataType, this.costDiffData, '2222222222222')
                    } else if (this.costType == '3') {
                        if (data === 0) {
                            this.noReportDataType = true;
                        } else {
                            this.noReportDataType = false;
                            this.noReportData = data;
                        }
                        // console.log(this.noReportDataType, this.noReportData, '3333333333333')
                    } else if (this.costType == '4') {
                        if (data === 0) {
                            this.retroaciveDataType = true;
                        } else {
                            this.retroaciveDataType = false;
                            this.retroaciveData = data;
                        }
                        // console.log(this.retroaciveDataType, this.retroaciveData, '44444444444')
                    }
                }
            } catch (error) {
                this.$Message.error({
                    content: error
                })
            }
        },
        /** 切换tab */
        async bandleTab(index) {
            console.log(this.searchData, this.name1, index, 'saerch')
            try {
                this.costType = index;
                this.getDataList();
            } catch (error) {
                this.$Message.error({
                    content: error
                })
            }

        },
        // 范围统计
        searchTime(date, type) {
            this.searchData.date = date;
        },

        /** 搜索 */
        async handleSearch() {
            try {
                if (!this.searchData.date) {
                    this.$Message.warning({
                        content: '请选择报表时间'
                    })
                    return;
                }
                let params = {
                    costType: this.costType
                }
                this.costData = [];
                this.costDiffData = [];
                this.noReportData = [];
                this.retroaciveData = [];
                this.show_item = true;
                let res = await this.$store.dispatch(`${namespace}/companyData`, { ...this.searchData, ...params });
                if (res.data.ret === 0) {
                    this.show_item = false;
                    let data = res.data.data;
                    if (data === 0) {
                        this.$Message.warning({
                            content: `暂无${this.searchData.date}报表`
                        })
                    }
                    if (this.costType == '1') {
                        if (data === 0) {
                            this.costDataType = true;
                        } else {
                            this.costDataType = false;
                            this.costData = data;
                        }
                    } else if (this.costType == '2') {
                        if (data === 0) {
                            this.costDiffDataType = true;
                        } else {
                            this.costDiffDataType = false;
                            this.costDiffData = data;
                        }
                    } else if (this.costType == '3') {
                        if (data === 0) {
                            this.noReportDataType = true;
                        } else {
                            this.noReportDataType = false;
                            this.noReportData = data;
                        }
                    } else if (this.costType == '4') {
                        if (data === 0) {
                            this.retroaciveDataType = true;
                        } else {
                            this.retroaciveDataType = false;
                            this.retroaciveData = data;
                        }
                    }
                }
            } catch (error) {
                this.$Message.error({
                    content: error
                })
            }
        },

        /** 更新 -- 生成 */
        async updateCompany () {
            try {
                if (!this.searchData.date) {
                    this.$Message.warning({
                        content: '请选择报表时间'
                    })
                    return;
                }
                let params = {
                    costType: this.costType
                }
                this.isDisabled = true;

                this.costData = [];
                this.costDiffData = [];
                this.noReportData = [];
                this.retroaciveData = [];
                this.show_item = true;
                /** 更新 */
                let res = await this.$store.dispatch(`${namespace}/updateCompanyData`, { ...this.searchData, ...params });
                if (res.data.ret === 0) {
                    this.$Message.success({
                        content: res.data.data
                    })
                    this.show_item = false;
                    this.isDisabled = false;
                }

                /** 重新调取接口 */
                let ress = await this.$store.dispatch(`${namespace}/companyData`, { ...this.searchData, ...params });
                if (ress.data.ret === 0) {
                    this.isDisabled = false;
                    this.show_item = false;
                    let data = ress.data.data;
                    if (data === 0) {
                        this.$Message.warning({
                            content: `暂无${this.searchData.date}报表`
                        })
                    }
                    if (this.costType == '1') {
                        if (data === 0) {
                            this.costDataType = true;
                        } else {
                            this.costDataType = false;
                            this.costData = data;
                        }
                    } else if (this.costType == '2') {
                        if (data === 0) {
                            this.costDiffDataType = true;
                        } else {
                            this.costDiffDataType = false;
                            this.costDiffData = data;
                        }
                    } else if (this.costType == '3') {
                        if (data === 0) {
                            this.noReportDataType = true;
                        } else {
                            this.noReportDataType = false;
                            this.noReportData = data;
                        }
                    } else if (this.costType == '4') {
                        if (data === 0) {
                            this.retroaciveDataType = true;
                        } else {
                            this.retroaciveDataType = false;
                            this.retroaciveData = data;
                        }
                    }
                }
            } catch (error) {
                this.$Message.error({
                    content: error
                })
            }
        },
        resetForm() {
            this.$refs["clearDatePicker"].handleClear();
        }
    }
};
</script>

<style scoped>
.company {
    padding: 10px;
}
.company_item {
    position: fixed;
    width: 100%;
    height: 80%;

    z-index: 99;
    top: 0;
    right: 0;
}
.company_item_box {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.company_item_spin {
}
.company .form {
    background: #fff;
    padding: 10px;
}
.company .handleBtn {
    padding: 10px;
    background: #fff;
}
.company >>> .ivu-tabs-bar {
    background-color: #fff;
}
.company >>> .reporBox {
    padding: 10px;
    background: #fff;
}
.company >>> .reporBox h3 {
    height: 50px;
    line-height: 50px;
    font-size: 32px;
    text-align: center;
    margin-bottom: 10px;
}
.company >>> .reporBox .textRight {
    margin-bottom: 8px;
    text-align: right;
}
</style>
